<template>
  <div class="light-container">
    <div class="light-tips">
      温馨提示：绿色代表房间内已绑定设备，灰色代表房间未绑定设备，黄色代表房间内灯打开了
    </div>
    <div class="light-wrap">
      <el-tabs v-model="activename" type="border-card">
        <el-tab-pane name="first" label="尉氏县社区居家智慧养老服务中心1F">
          <div class="light-floor-wrap">
            <el-row :gutter="20">
              <el-col
                v-for="(light, lidx) in dataFirstList"
                :key="lidx"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-card shadow="hover">
                  <div slot="header" class="header">
                    <span>{{ light.room_code }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="second" label="尉氏县社区居家智慧养老服务中心2F">
          <div class="light-room-switch">
            <template v-for="(scene, index) in ysxSceneList">
              <el-button :key="index" type="primary" @click="handleClickOpen(scene)">{{ scene.scene_name | toGB2312 }}-情景模式</el-button>
            </template>
            <el-button v-if="adminType == 9" :type="closeTitle == '关闭声音' ? 'danger' : 'primary'" @click="handleClosesy">{{ closeTitle }}</el-button>
          </div>
          <div class="light-floor-wrap">
            <el-row :gutter="20">
              <el-col
                v-for="(light, lidx) in ysxAreaList"
                :key="lidx"
                :xs="24"
                :sm="12"
                :md="6"
                :lg="6"
                :xl="6"
              >
                <el-card 
                  shadow="hover" 
                  :class="
                        light.light_status == 'on'
                          ? backgroundColor[1] : backgroundColor[0]
                      "
                >
                  <div slot="header" class="header">
                    <span>{{ light.area_name | toGB2312 }}</span>
                    <!-- <div class="light-bj ysx-bj-move"></div> -->
                    <el-button
                      type="primary"
                      size="mini"
                      plain
                      class="light_button"
                      v-if="light.device_list.length"
                      @click="devicebind(light, lidx)"
                    >
                      设备列表
                  </el-button>
                  </div>
                  <div style="width: 100%;">
                     <div class="light-room">
                      <div class="light-room-item">
                        <span>主控开关</span>
                        <el-button type="primary" plain @click="handleRoomOpen(light, 'on')">开灯</el-button>
                        <el-button type="danger" plain @click="handleRoomOpen(light, 'off')">关灯</el-button>
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <div class="ysx-room-wrap">
            <div class="ysx-room-jujia-left">
              <div class="ysx-title">
                居家自理室
                <!-- <el-button
                  type="primary"
                  size="mini"
                  plain
                  class="light_button"
                  @click="handleDevice"
                >
                  设备列表
                </el-button> -->
              </div>
              <div class="ysx-room-jujia">
                <div class="ysx-jujia-switch">
                  照明：
                  <el-switch
                    v-model="jujiaobj.value1"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233CEF01')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-jujiakt-switch">
                  灯带：
                  <el-switch
                    v-model="jujiaobj.value2"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233CEF02')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-jujiawsj-switch">
                  射灯：
                  <el-switch
                    v-model="jujiaobj.value3"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233CEF03')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-jujiaxg-switch">
                  夜起：
                  <el-switch
                    v-model="jujiaobj.value4"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233CEF04')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-jujia-bed" :class="{'colorGreen': jujiaobj.color == 1, 'colorYellow': jujiaobj.color == 2}"></div>
                <img class="ysx-laoren" :class="{'ysx-laoren-move1': jujiaobj.laorenmove == 1, 'ysx-laoren-move2': jujiaobj.laorenmove == 2, 'ysx-laoren-move3': jujiaobj.laorenmove == 3, 'ysx-laoren-move4': jujiaobj.laorenmove == 4}" src="../../assets/images/person-laoren.png" alt="" />
                <img class="ysx-first" v-show="!this.jujiaobj.onoff1" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-first" v-show="this.jujiaobj.onoff1" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-second" v-show="!this.jujiaobj.onoff2" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-second" v-show="this.jujiaobj.onoff2" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-third" v-show="!this.jujiaobj.onoff3" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-third" v-show="this.jujiaobj.onoff3" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-four" v-show="!this.jujiaobj.onoff4" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-four" v-show="this.jujiaobj.onoff4" src="../../assets/images/light-yellow.png" alt="">
                <div class="ysx-jujia-cltop"></div>
                <div class="ysx-jujia-clbot"></div>
              </div>
            </div>
            <div class="ysx-room-jujia-right">
              <div class="ysx-title">
                介助介护培训室
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  class="light_button"
                  @click="handleRouterPush"
                >
                  跳转介助介护培训室界面
                </el-button>
              </div>
              <div class="ysx-room-quanhu">
                 <!-- <div class="ysx-jiehuws-switch">
                  卧室开关：
                  <el-switch
                    v-model="ysxroomValue"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                  >
                  </el-switch>
                </div> -->
                <!-- <div class="ysx-jiehuwsj-switch">
                  卫生间开关：
                  <el-switch
                    v-model="ysxroomValue"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                  >
                  </el-switch>
                </div> -->
                <div class="ysx-jiehu-bed" :class="{'colorGreen': jiehuobj.color == 1, 'colorYellow': jiehuobj.color == 2}"></div>
                <img class="ysx-jiehu-laoren" :class="{'ysx-jiehu-move1': jiehuobj.laorenmove == 1, 'ysx-jiehu-move2': jiehuobj.laorenmove == 2}" src="../../assets/images/person-laoren.png" alt="" />
                <!-- <img class="ysx-jiehu-first" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-jiehu-first" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-jiehu-second" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-jiehu-second" src="../../assets/images/light-yellow.png" alt=""> -->
                <div class="ysx-jiehu-cltop"></div>
                <div class="ysx-jiehu-clbot"></div>
              </div>
            </div>
             <div class="ysx-room-jujia-bottom">
              <div class="ysx-title">
                失能失智照护培训室
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  class="light_button"
                  @click="handleRouterPush"
                >
                  跳转尿湿监测界面
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  plain
                  class="light_button"
                  @click="handleRouterPush2"
                >
                  跳转心率监测界面
                </el-button>
              </div>
              <div class="ysx-room-jiehu">
                <div class="ysx-jiehuws-switch">
                  照明：
                  <el-switch
                    v-model="quanhuobj.value1"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233D2601')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-quanhusd-switch">
                  射灯：
                  <el-switch
                    v-model="quanhuobj.value2"
                    active-text="开"
                    inactive-text="关"
                    active-color="#e0c720"
                    @change="(e) => handleJujiaOpen(e, '60A423FFFE233D2602')"
                  >
                  </el-switch>
                </div>
                <div class="ysx-quanhu-cltop"></div>
                <div class="ysx-quanhu-clbot"></div>
                <div class="ysx-quanhu-text">
                  <span>心率：{{zhongzhengobj.value2}}</span>
                  <span>呼吸：{{zhongzhengobj.value3}}</span>
                </div>
                <div class="ysx-quanhu-bed" :class="{'colorYellow': quanhuobj.color == 2 }"></div>
                <img class="ysx-quanhu-first" v-show="!this.quanhuobj.onoff1" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-quanhu-first" v-show="this.quanhuobj.onoff1" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-quanhu-second" v-show="!this.quanhuobj.onoff2" src="../../assets/images/light-hui.png" alt="">
                <img class="ysx-quanhu-second" v-show="this.quanhuobj.onoff2" src="../../assets/images/light-yellow.png" alt="">
                <img class="ysx-quanhu-laoren" :class="{'ysx-quanhu-move1': jiehunmove == 1, 'ysx-quanhu-move2': jiehunmove == 2}" src="../../assets/images/person-laoren.png" alt="" />
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog
      :title="deviceTitle"
      :visible.sync="dialogVisibleEq"
      width="50%"
      :before-close="closeDialogEq"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div class="dialog-main">
        <div class="table-do">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              已绑定设备列表
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-table
              ref="table"
              :data="ysxBinddeviceList"
              :header-cell-style="{ backgroundColor: '#409EFF', color: '#fff' }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column
                v-for="(item, index) in tableColumns"
                :key="index"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :formatter="item.formatter"
                :filters="item.filters"
                :class-name="item.className"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
               v-if="adminType == 9"
                label="操作"
                fixed="right"
                width="220"
              >
                <template slot-scope="scope">
                  <el-button
                    v-if="scope.row.type == '9'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleView(scope.row)"
                  >
                    查看
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="primary"
                    plain
                    @click="handleEdit(scope.row, 'on', scope.$index)"
                  >
                    打开
                  </el-button>
                  <el-button
                    v-if="scope.row.type == '1' || scope.row.type == '7'"
                    size="mini"
                    type="danger"
                    plain
                    @click="handleEdit(scope.row, 'off', scope.$index)"
                  >
                    关闭
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <el-dialog
      title="查看温湿度信息"
      :visible.sync="dialogModalVisible"
      width="20%"
      :before-close="closeModalDialog"
      :close-on-click-modal="false"
      class="dialogForm"
    >
      <div>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div> <span>温度：</span> {{ vensiData.val1 }} ℃</div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <div> <span>湿度：</span> {{ vensiData.val2 }} %</div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import * as Api_ysxroom from "@/api/ysxroom";
  import mixins from '@/utils/mixins.js';
  export default {
    name: "LightManage",
    mixins: [mixins],
    data() {
      return {
        activename: "first",
        backgroundColor: ["colorType0", "colorType1", "colorType2"],
        dataFirstList: [
          {
            id: 1,
            room_code: "智能化情景集中演示区",
            device_list: [
              {
                type: 1,
                name: "开关"
              },
            ]
          },
          {
            id: 2,
            room_code: "智慧安全用电展区功能说明",
            device_list: [
              {
                type: 1,
                name: "开关"
              },
            ]
          },
          {
            id: 3,
            room_code: "“七联一动”演示大屏",
            device_list: [
              {
                type: 1,
                name: "开关"
              },
            ]
          },
        ],
        deviceTitle: "已设备绑定列表",
        dialogVisibleEq: false,
        tableColumns: [
          { prop: "area_id", label: "设备编号" },
          { prop: "obj_name", label: "设备名称", formatter: this.genderFormatter },
          { prop: "remark", label: "设备信息" },
        ],
        //温湿度
        dialogModalVisible: false,
        //居家养老
        ysxroomValue: false,
        jiehunmove: 0,
        ysxBinddeviceList: [],//绑定的设备
      };
    },
    filters: {
      toGB2312(str) {
        if(!str) {
          return ""
        }
        return unescape(str.replace(/u/gi, '\\u').replace(/\\u/gi, '%u'));
      }
    },
    created() {
      
    },
    beforeDestroy() {},
    mounted() {
      //尉氏县网关登录
      Api_ysxroom.ysxShowLogin({host_id: "40aa568e24d5"})
      //获取区域
      if(this.ysxAreaList.length == 0) {
        Api_ysxroom.ysxShowArea({host_id: "40aa568e24d5"})
      }
      // 获取情景列表
      Api_ysxroom.ysxShowScene({host_id: "40aa568e24d5"})
      
    },
    methods: {
      handleRouterPush() {
        this.$router.push("/badNum")
      },
      handleRouterPush2() {
        this.$router.push("/ICU")
      },
      handleDevice() {

      },
      //开关
      handleJujiaOpen(e, devcie_code) {
        // 单个设备控制
        let onoff = e ? "on" : "off";
        Api_ysxroom.ysxShowDeviceonoff({host_id: "40aa568e24d5", onoff, devcie_code, type: 1})
      },
      tableRowClassName({row}) {
        if (row.light_status == 'on' || row.onoff == 'on') {
          return 'warning-row';
        } 
        return '';
      },
      closeDialogEq() {
        this.dialogVisibleEq = false;
      },
      handleEdit(row, onoff, index) {
        // 单个设备控制
        Api_ysxroom.ysxShowDeviceonoff({host_id: "40aa568e24d5", onoff, devcie_code: row.obj_id, type: row.type})
      },
      handleRoomOpen(light, onoff) {
        Api_ysxroom.ysxShowRoomcontrol({host_id: "40aa568e24d5", parent_id: light.parent_id, area_id: light.area_id, onoff})
      },
      closeModalDialog() {
        this.dialogModalVisible = false;
      }, 
      handleView(row) {
        this.dialogModalVisible = true;
        Api_ysxroom.ysxShowDevicestatus({host_id: "40aa568e24d5", ids: row.obj_id})
      },
      devicebind(item, index) {
        this.roomTestIndex = index;
        this.dialogVisibleEq = true;
        // let device_list = item.device_list.filter((item => {
        //   return item.type != '0'
        // }))
        this.ysxBinddeviceList = item.device_list;
        this.$nextTick(() => {
          this.$refs.table.doLayout()
        })
      },
      genderFormatter(row) {
        if(row.obj_name) {
          return this.toGB2312(row.obj_name)
        }
      },
      //执行情景
      handleClickOpen(scene) {
        Api_ysxroom.ysxShowSceneexecute({host_id: "40aa568e24d5", scene_id: scene.scene_id })
      }
    }
  };
</script>
<style lang="scss" scoped>
.ysx-room-wrap{
  overflow: hidden;
  .ysx-room-jujia-left, .ysx-room-jujia-right, .ysx-room-jujia-bottom{
    float: left;
    .ysx-title{
      widows: 100%;
      height: 44px;
      line-height: 44px;
      color: #fff;
      background-color: #18ba39;
      padding-left: 12px;
      font-size: 18px;
    }
  }
  .ysx-room-jujia-right{
    margin-top: 20px;
    width: 632px;
  }
  .light_button{
    padding: 5px 6px;
    float: right;
    margin-right: 16px;
    margin-top: 9px;
  }
}

.ysx-room-jujia-bottom{
  margin-top: 20px;
  margin-left: 40px;
  float: right !important;
}

.ysx-room-jujia{
  width: 900px;
  height: 542px;
  background: url("../../assets/images/jujiayanglao.png") no-repeat;
  background-size: contain;
  position: relative;
  .ysx-jujia-switch{
    position: absolute;
    top: 240px;
    left: 234px;
    color: #ff4d4f;
  }
  .ysx-jujiakt-switch{
    position: absolute;
    top: 240px;
    left: 613px;
    color: #ff4d4f;
  }
  .ysx-jujiawsj-switch{
    position: absolute;
    top: 284px;
    left: 233px;
    color: #ff4d4f;
  }
  .ysx-jujiaxg-switch{
    position: absolute;
    bottom: 15px;
    right: 186px;
    color: #ff4d4f;
  }

  .ysx-jujia-bed{
    position: absolute;
    width: 134px;
    height: 95px;
    left: 79px;
    top: 103px;
    
  }

  .ysx-laoren{
    width: 50px;
    position: absolute;
    // top: 89px;
    // left: 121px;
    top: 130px;
    left: 520px;
  }

  .ysx-first{
    position: absolute;
    width: 80px;
    left: 220px;
    top: 109px;
  }
  .ysx-second{
    position: absolute;
    width: 80px;
    left: 637px;
    top: 109px;
  }
  .ysx-third{
    position: absolute;
    width: 80px;
    left: 220px;
    top: 369px;
  }
  .ysx-four{
    position: absolute;
    width: 80px;
    left: 620px;
    top: 369px;
  }

  .ysx-jujia-cltop{
    position: absolute;
    top: 1px;
    left: 0px; 
    width: 11px;
    height: 0;
    background-color: #409EFF;
  }
  .ysx-jujia-clbot{
    position: absolute;
    bottom: 1px;
    left: 0px; 
    width: 11px;
    height: 0;
    background-color: #409EFF;
  }
}

.colorGreen{
  background-color: #18ba39;
}

.colorYellow{
  background-color: #ceb611;
}

.ysx-room-quanhu{
  width: 632px;
  height: 756px;
  background: url("../../assets/images/jiehuxing.png") no-repeat;
  background-size: contain;
  position: relative;
  .ysx-jiehuws-switch{
    position: absolute;
    top: 338px;
    right: 31px;
    color: #ff4d4f;
  }
  .ysx-jiehuwsj-switch{
    position: absolute;
    top: 395px;
    right: 31px;
    color: #ff4d4f;
  }
  .ysx-jiehu-laoren{
    width: 50px;
    position: absolute;
    // top: 150px;
    // left: 177px;
    z-index: 10;
    top: 207px;
    left: 506px;
  }

  .ysx-jiehu-bed{
    position: absolute;
    width: 187px;
    height: 129px;
    left: 110px;
    top: 142px;
  }

  .ysx-jiehu-first{
    position: absolute;
    width: 80px;
    left: 400px;
    top: 169px;
  }
  .ysx-jiehu-second{
    position: absolute;
    width: 80px;
    left: 291px;
    top: 550px;
  }
  .ysx-jiehu-cltop{
    position: absolute;
    top: 1px;
    left: 0px; 
    width: 15px;
    height: 0;
    background-color: #409EFF;
  }
  .ysx-jiehu-clbot{
    position: absolute;
    top: 1px;
    left: 0px; 
    width: 11px;
    height: 0;
    background-color: #409EFF;
  }
}

.ysx-room-jiehu{
  width: 632px;
  height: 387px;
  background: url("../../assets/images/quanhuxing.png") no-repeat;
  background-size: contain;
  position: relative;
  .ysx-jiehuws-switch{
    position: absolute;
    bottom: 25px;
    right: 55px;
    color: #ff4d4f;
  }
  .ysx-quanhusd-switch{
    position: absolute;
    bottom: 25px;
    right: 212px;
    color: #ff4d4f;
  }
  .ysx-quanhu-bed{
    position: absolute;
    width: 189px;
    height: 132px;
    left: 109px;
    top: 140px;
    // background-color: #ceb611;
  }
  .ysx-quanhu-laoren{
    width: 50px;
    position: absolute;
    top: 150px;
    left: 177px;
    // top: 218px;
    // left: 514px;
  }

  .ysx-quanhu-first{
    position: absolute;
    width: 80px;
    left: 400px;
    top: 169px;
  }

  .ysx-quanhu-second{
    position: absolute;
    width: 80px;
    left: 312px;
    top: 70px;
  }

  .ysx-quanhu-cltop{
    position: absolute;
    top: 1px;
    left: 0px; 
    width: 13px;
    height: 0;
    background-color: #409EFF;
  }

  .ysx-quanhu-clbot{
    position: absolute;
    top: 1px;
    left: 0px; 
    width: 13px;
    height: 0;
    background-color: #409EFF;
  }
  .ysx-quanhu-text{
    position: absolute;
    top: 279px;
    left: 335px;
    width: 240px;
    height: 30px;
    font-size: 18px;
    color: #837b7b;
    span{
      &:nth-child(2){
        margin-left: 50px;
      }
    }
  }
}

// 居家养老 -> 窗帘 top
.ysx-jujiaclopen-move{
  animation: jujiacltopfirst 5s;
  -webkit-animation: jujiacltopfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jujiacltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 133px;
    }
}
 
@-webkit-keyframes jujiacltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 133px;
    }
}

// 居家养老 -> 窗帘 bot
.ysx-jujiaclclose-move{
  animation: jujiaclbotfirst 5s;
  -webkit-animation: jujiaclbotfirst 5s;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jujiaclbotfirst
{
    from {
      height: 133px;
    }
    to  {
      height: 0;
    }
}
 
@-webkit-keyframes jujiaclbotfirst
{
    from {
      height: 133px;
    }
    to  {
      height: 0;
    }
}


// 介护养老 -> 窗帘 top
.ysx-jiehuclopen-move{
  animation: jiehucltopfirst 5s;
  -webkit-animation: jiehucltopfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jiehucltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 192px;
    }
}
 
@-webkit-keyframes jiehucltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 192px;
    }
}

// 介护养老 -> 窗帘 bot
.ysx-jiehuclclose-move{
  animation: jiehuclbotfirst 5s;
  -webkit-animation: jiehuclbotfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jiehuclbotfirst
{
    from {
      height: 192px;
    }
    to  {
      height: 0;
    }
}
 
@-webkit-keyframes jiehuclbotfirst
{
    from {
      height: 192px;
    }
    to  {
      height: 0;
    }
}


// 全护养老 -> 窗帘 top
.ysx-quanhuclopen-move{
  animation: quanhucltopfirst 5s;
  -webkit-animation: quanhucltopfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes quanhucltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 193px;
    }
}
 
@-webkit-keyframes quanhucltopfirst
{
    from {
      height: 0;
    }
    to  {
      height: 193px;
    }
}

// 介护养老 -> 窗帘 bot
.ysx-quanhuclclose-move{
  animation: quanhuclbotfirst 5s;
  -webkit-animation: quanhuclbotfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes quanhuclbotfirst
{
    from {
      height: 193px;
    }
    to  {
      height: 0;
    }
}
 
@-webkit-keyframes quanhuclbotfirst
{
    from {
      height: 193px;
    }
    to  {
      height: 0;
    }
}

//介护 卧室 -> 床上
.ysx-jiehu-move1{
  animation: jiehufirst 3s;
  -webkit-animation: jiehufirst 3s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jiehufirst
{
    // 0%   {
    //   // top: 150px;
    //   // left: 177px;
    //   top: 207px;
    //   left: 506px;
    // }
    // 25%  {
    //   top: 150px;
    //   left: 360px;
    // }
    // 50%  {
    //   top: 200px;
    //   left: 660px;
    // }
    // 75%  {
    //   top: 420px;
    //   left: 660px;
    // }
    // 100%  {
    //   top: 520px;
    //   left: 460px;
    // }
    from{
      top: 207px;
      left: 506px;
    }
    to{
      top: 150px;
      left: 177px;
    }
}
 
@-webkit-keyframes jiehufirst
{
    // 0%   {
    //   // top: 150px;
    //   // left: 177px;
    //   top: 207px;
    //   left: 506px;
    // }
    // 25%  {
    //   top: 150px;
    //   left: 360px;
    // }
    // 50%  {
    //   top: 200px;
    //   left: 660px;
    // }
    // 75%  {
    //   top: 420px;
    //   left: 660px;
    // }
    // 100%  {
    //   top: 520px;
    //   left: 460px;
    // }
    from{
      top: 207px;
      left: 506px;
    }
    to{
      top: 150px;
      left: 177px;
    }
}

//介护 床上 -> 卧室
.ysx-jiehu-move2{
  animation: jiehuSecond 3s;
  -webkit-animation: jiehuSecond 3s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes jiehuSecond
{
    from{
      top: 150px;
      left: 177px;
    }
    to{
      top: 207px;
      left: 506px;
    }
    // 0%  {
    //   top: 520px;
    //   left: 460px;
    // }
    // 25%  {
    //   top: 420px;
    //   left: 660px;
    // }
    // 50%  {
    //   top: 200px;
    //   left: 660px;
    // }
    // 75%  {
    //   top: 150px;
    //   left: 360px;
    // }
    // 100%   {
    //   top: 150px;
    //   left: 177px;
    // }
}
 
@-webkit-keyframes jiehuSecond
{
    // 0%  {
    //   top: 520px;
    //   left: 460px;
    // }
    // 25%  {
    //   top: 420px;
    //   left: 660px;
    // }
    // 50%  {
    //   top: 200px;
    //   left: 660px;
    // }
    // 75%  {
    //   top: 150px;
    //   left: 360px;
    // }
    // 100%   {
    //   top: 150px;
    //   left: 177px;
    // }
    from{
      top: 150px;
      left: 177px;
    }
    to{
      top: 207px;
      left: 506px;
    }
}


// ysx-laoren-move 居家养老
//卧室 -> 客厅
.ysx-laoren-move1{
  animation: myfirst 5s;
  -webkit-animation: myfirst 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes myfirst
{
    0%   {
      top: 89px;
      left: 121px;
    }
    25%  {
      top: 89px;
      left: 280px;
    }
    50%  {
      left: 280px;
      top: 130px;
    }
    100%  {
      top: 130px;
      left: 520px;
    }
}
 
@-webkit-keyframes myfirst
{
     0%   {
      top: 89px;
      left: 121px;
    }
    25%  {
      top: 89px;
      left: 280px;
    }
    50%  {
      left: 280px;
      top: 130px;
    }
    100%  {
      top: 130px;
      left: 520px;
    }
}

// 客厅 -> 卫生间
.ysx-laoren-move2{
  top: 130px;
  left: 520px;
  animation: mySecond 5s;
  -webkit-animation: mySecond 5s;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes mySecond
{
    0%   {
      top: 130px;
      left: 520px;
    }
    25%  {
      top: 320px;
      left: 520px;
    }
    50%  {
      top: 320px;
      left: 320px;
    }
    100%  {
      left: 320px;
      top: 350px;
    }
}
 
@-webkit-keyframes mySecond
{
    0%   {
      top: 130px;
      left: 520px;
    }
    25%  {
      top: 320px;
      left: 520px;
    }
    50%  {
      top: 320px;
      left: 320px;
    }
    100%  {
      left: 320px;
      top: 350px;
    }
}


// 卫生间 -> 客厅
.ysx-laoren-move3{
  left: 320px;
  top: 350px;
  animation: myThird 5s;
  -webkit-animation: myThird 5s;
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes myThird
{
    0%  {
      left: 320px;
      top: 350px;
    }
    33%  {
      top: 320px;
      left: 320px;
    }
    66%  {
      top: 320px;
      left: 520px;
    }
    100%   {
      top: 130px;
      left: 520px;
    }
}
 
@-webkit-keyframes myThird
{
    0%  {
      left: 320px;
      top: 350px;
    }
    33%  {
      top: 320px;
      left: 320px;
    }
    66%  {
      top: 320px;
      left: 520px;
    }
    100%   {
      top: 130px;
      left: 520px;
    }
}

//客厅 -> 卧室
.ysx-laoren-move4{
  animation: myFour 5s;
  -webkit-animation: myFour 5s; 
  animation-fill-mode:forwards;
  -webkit-animation-fill-mode:forwards;
  animation-timing-function:linear;
  -webkit-animation-timing-function:linear;
}

@keyframes myFour
{
    0%  {
      top: 130px;
      left: 520px;
    }
    33%  {
      left: 280px;
      top: 130px;
    }
    66%  {
      top: 89px;
      left: 280px;
    }
    100%   {
      top: 89px;
      left: 121px;
    }
}
 
@-webkit-keyframes myFour
{
    0%  {
      top: 130px;
      left: 520px;
    }
    33%  {
      left: 280px;
      top: 130px;
    }
    66%  {
      top: 89px;
      left: 280px;
    }
    100%   {
      top: 89px;
      left: 121px;
    }
}



::v-deep{
  .el-table {
    .cell {
      line-height: 25px;
    }
  }
}
  .light-container{
    box-sizing: border-box;
    width: 100%;
    padding: 0 30px;
    margin: 0;
    background: #fff;
    .light-tips{
      text-align: right;
      color: #999;
      margin-bottom: 10px;
    }
    .el-table{
      ::v-deep {
        .warning-row {
          background: oldlace;
        }
      }
    } 

    .dialog-main {
      .table-do {
        margin-bottom: 15px;
      }

      ::v-deep {
        th {
          .cell {
            color: #fff;
          }
        }
      }
    }
    .light-wrap{
      padding: 30px;
      border: 1px solid #e4e7ed;
    }
    .light-room-switch{
      box-sizing: border-box;
      button{
        margin: 0 5px 10px;
      }
    }
   .light-floor-wrap{
     margin-bottom: 10px;
     .el-card.colorType0 {
       ::v-deep {
         .el-card__header {
           background: #18ba39;
         }
       }
     }
     .el-card.colorType1 {
       ::v-deep {
         .el-card__header {
           background: #e0c720;
         }
       }
     }
     .el-card.colorType2 {
       ::v-deep {
         .el-card__header {
           background: #999;
         }
       }
     }
     .el-card {
       cursor: pointer;
       border-radius: 4px;

       ::v-deep {
         .el-card__header {
           height: 44x;
           padding: 0 12px;
           line-height: 44px;
           background: #18ba39;
         }

         .el-card__body {
           box-sizing: border-box;
           padding: 12px;

           .num,
           .type,
           .price {
             margin-bottom: 12px;
             font-size: 16px;
             line-height: 24px;
             color: #333;
           }

           .price {
             color: #ff4d50;
           }

           .status {
             display: flex;
             line-height: 24px;

             span {
               flex: 1;
               color: #1791ff;
             }
           }
         }
       }
     }

     .header {
       position: relative;
       display: flex;
       align-items: center;
       color: #fff;
       .light_button{
         padding: 5px 6px;
       }
       .light-bj{
          display: inline-block;
          // position: absolute;
          // right: 70px;
          // top: 6px;
          margin-right: 10px;
          margin-top: -4px;
          width: 28px;
          height: 28px;
          background: url("../../assets/images/bj-hui.png") no-repeat;
          background-size: 28px 28px;
          background-position: center;
       }
        
       span {
         flex: 1;
         font-size: 18px;
         text-align: center;

         &:first-child {
           text-align: left;
         }

         i {
           font-size: 12px;
           font-style: normal;
           color: rgba($color: #fff, $alpha: 0.5);
         }
       }
     }
     .light-room{
        .light-room-item{
          margin-top: 10px;
          span{
            display: inline-block;
            width: 100px;
          }
        }
     }
   }
  }

  //报警闪烁
.ysx-bj-move{
  // animation: ysxbjmove 5s;
  // -webkit-animation: myFour 5s; 
  // animation-fill-mode:forwards;
  // -webkit-animation-fill-mode:forwards;
  // animation-timing-function:linear;
  // -webkit-animation-timing-function:linear;
  animation: ysxbjmove 0.02s 0s ease-in infinite alternate;
  -webkit-animation: ysxbjmove 0.02s 0s ease-in infinite alternate;
}
@keyframes ysxbjmove
{
    from {
      background-image: url("../../assets/images/bj-hui.png");
    }
    to {
      background-image: url("../../assets/images/bj-liang.png");
    }
}
 
@-webkit-keyframes ysxbjmove
{
    from {
      background-image: url("../../assets/images/bj-hui.png");
    }
    to {
      background-image: url("../../assets/images/bj-liang.png");
    }
}
</style>
